<template>
  <div class="wrapper">
			<div class="header">{{currentGroupDetail.Name}}</div>
			<div class="content">
					<div class="friend_img">
							<img id="FaceUrl" :src="currentGroupDetail.FaceUrl" alt="">
					</div>
					<div class="user_info">
						<div class="user_underline">
							<div class="items_left">
								<span class="items_title">群号</span>
								<span class="items_text" id="group_id">{{currentGroupDetail.GroupId}}</span>
							</div>
						</div>
					</div>
					<div class="user_info">
						<div class="user_underline">
							<div class="items_left">
								<span class="items_title">群名称</span>
								<span class="items_text" id="group_name"> <input type="text"v-model="currentGroupDetail.Name"></span>
							</div>
							<div class="items_right"><i class="iconfont icon-dayuhao"></i></div>
						</div>
					</div>
					<div class="user_info">
						<div class="user_underline">
							<div class="items_left">
								<span class="items_title">群公告</span>
								<span class="items_text" id="group_desc"> <input type="text"v-model="currentGroupDetail.Notification"></span>
							</div>
							<div class="items_right"><i class="iconfont icon-dayuhao"></i></div>
						</div>
					</div>
					<div class="user_info">
						<div class="user_underline">
							<div class="items_left">
								<span class="items_title">群类型</span>
								<span class="items_text" id="group_desc"><input type="text"v-model="currentGroupDetail.Type"></span>
							</div>
							<div class="items_right"><i class="iconfont icon-dayuhao"></i></div>
						</div>
					</div>
					<div class="user_info">
						<div class="user_underline">
							<div class="items_left">
								<span class="items_title">创建时间</span>
								<span class="items_text" id="group_createtime">{{timeFormat(currentGroupDetail.CreateTime)}}</span>
							</div>
							<div class="items_right"><i class="iconfont icon-dayuhao"></i></div>
						</div>
					</div>
					<div class="user_info">
						<div class="user_underline">
							<div class="items_left">
								<span class="items_title">成员</span>
								<span class="items_text" id="group_parson">{{currentGroupDetail.MemberNum}}人</span>
							</div>
							<div class="items_right"><i class="iconfont icon-dayuhao"></i></div>
						</div>
					</div>
					<div class="user_info">
						<div class="user_underline">
							<div class="items_left">
								<span class="items_title">群简介</span>
								<span class="items_text" id="group_info"><input type="text"v-model="currentGroupDetail.Introduction"></span>
							</div>
							<div class="items_right"><i class="iconfont icon-dayuhao"></i></div>
						</div>
					</div>
          <div class="user_info">
						<div class="user_underline">
							<div class="items_left">
								<span class="items_title">群组禁言</span>
								<span class="items_text" id="group_info">
                  <input name="ShutUpAllMember" :checked="currentGroupDetail.ShutUpAllMember == 'Off'" type="radio" value="Off">关闭
                  <input name="ShutUpAllMember" :checked="currentGroupDetail.ShutUpAllMember == 'On'" type="radio" value="On">开启
                </span>
							</div>
							<div class="items_right"><i class="iconfont icon-dayuhao"></i></div>
						</div>
					</div>
					<div class="halving_line"></div>
					<div class="user_info">
						<div class="user_underline">
							<div class="items_left">
								<span class="items_title">群消息方式</span>
								<span class="items_text">接收并提示消息</span>
							</div>
							<div class="items_right"><i class="iconfont icon-dayuhao"></i></div>
						</div>
					</div>
					<!-- <div class="user_info">
						<div class="user_underline">
							<div class="items_left">
								<span class="items_title">加群方式</span>
								<span class="items_text">需要回答加群问题</span>
							</div>
							<div class="items_right"><i class="iconfont icon-dayuhao"></i></div>
						</div>
					</div> -->
					<!-- <div class="user_info">
						<div class="user_underline">
							<div class="items_left">
								<span class="items_title">我的名片</span>
								<span class="items_text" id="group_owner">{{currentGroupDetail.Owner_Account}}</span>
							</div>
							<div class="items_right"><i class="iconfont icon-dayuhao"></i></div>
						</div>
					</div> -->
					<div class="details_btn" id="details_btn">
            <button class="color_green" ref="changeDetail">修改群资料</button>
						<!-- <button class="color_green" >申请加群</button> -->
						<button class="color_green" v-show="currentGroupDetail.Type == 'Private'" ref="quitGroup">退出群</button>
						<!-- <button class="color_red" v-show="currentGroupDetail.Owner_Account === loginInfo.identifier">转让群</button> -->
						<button class="color_red" @click="dissolveGroup()" v-show="currentGroupDetail.Owner_Account === loginInfo.identifier">解散群</button>
					</div>
			</div>
	</div>
</template>

<script>
//import headTop from '../../components/header/head'
//import {cityGuess, hotcity, groupcity} from '../../service/getData'
import $ from 'jquery'
import Client from '../../config/common'
export default {
    data(){
        return{
					currentGroupId: -1,
					currentGroupDetail: {},
					loginInfo: {}
        }
		},
		created () {

				// 登录初始化
    		this.initLogin();
		},
		methods: {

			// 登录初始化
			initLogin() {
				Client.login(this.getLoginInfo);
			},

			// 获得登录成功信息
			getLoginInfo(loginInfo){
        // 将 登录信息保存在 vue的data里
        let That = this;
				this.loginInfo = loginInfo;
				Client.log("登录成功获取登录信息-start");
				Client.log(loginInfo);
				Client.log("登录成功获取登录信息-end");

				// 初始化获取groupId 并且 验证是否存在groupId
				this.initGetGroupId();

				// 显示当前groupId的群组详情
        this.getGroupInfo(this.makeGroupDate);
        
        // 修改群组信息
        $(this.$refs.changeDetail).on("click", function(){
          That.modifyGroup();
        });
			},

			// 时间格式化
			timeFormat(times) {   
    		return new Date(parseInt(times) * 1000).toLocaleString().replace(/\//g, "-").slice(0,10); 
			},

			// 获取显示当前群组详情的groupId 
			initGetGroupId() {
				if(Client.getQueryString("currentGroupId")){
					this.currentGroupId = Client.getQueryString("currentGroupId");
				}
				//如果群组详情页面没有groupId跳转回群组列表
				if(this.currentGroupId == -1){
					this.$router.push({path: '/groupList'})
					return;
				}
			},

			// 获取群组详情
			getGroupInfo(cbOK) {
				var options = {
						'GroupIdList': [
								this.currentGroupId
						],
						'GroupBaseInfoFilter': [
								'Type',
								'Name',
								'Introduction',
								'Notification',
								'FaceUrl',
								'CreateTime',
								'Owner_Account',
								'LastInfoTime',
								'LastMsgTime',
								'NextMsgSeq',
								'MemberNum',
								'MaxMemberNum',
								'ApplyJoinOption',
								'ShutUpAllMember'
						],
						'MemberInfoFilter': [
								'Account',
								'Role',
								'JoinTime',
								'LastSendMsgTime',
								'ShutUpUntil'
						]
				};
				webim.getGroupInfo(
						options,
						function(resp) {
								// Client.log(resp);
								if (resp.GroupInfo[0].ShutUpAllMember == 'On') {
										alert('该群组已开启全局禁言');
								}
								if (cbOK) {
										cbOK(resp);
								}
						},
						function(err) {
								alert(err.ErrorInfo);
						}
				);
				// Client.log(this.currentGroupId);
			},
			dissolveGroup(){
				console.log(this.currentGroupDetail.GroupId);
				this.destroyGroup(this.currentGroupDetail.GroupId);
			},

			//解散群组
			destroyGroup(group_id) {
					var options = null;
					if (group_id) {
							options = {
									'GroupId': group_id
							};
					}
					if (options == null) {
							alert('解散群时，群组ID非法');
							return;
					}
					webim.destroyGroup(
							options,
							function(resp) {
								Client.log("解散群成功-start");
								Client.log(resp);
								console.log("解散群成功-end");
									//在表格中删除对应的行
									// $('#get_my_group_table').bootstrapTable('remove', {
									// 		field: 'GroupId',
									// 		values: [group_id]
									// });
									//读取我的群组列表
									//getJoinedGroupListHigh(getGroupsCallbackOK);
									/* deleteSessDiv(webim.SESSION_TYPE.GROUP, group_id); //在最近的联系人列表删除可能存在的群会话 */
							},
							function(err) {
									alert(err.ErrorInfo);
							}
					);
			},

			// 操作群组详情
			makeGroupDate(groupDetail) {
				let data = groupDetail.GroupInfo[0];
				let That = this;
				if(data){
					this.currentGroupDetail = data;
				}
				
				Client.log("获取群组详细信息-start");
				Client.log(this.currentGroupDetail);
				Client.log("获取群组详细信息-end");

				// 退出群
				$(this.$refs.quitGroup).on("click", function(){
						
						That.quitGroup(That.currentGroupDetail.GroupId);
						
					});
				
				// let ApplyJoinOption = groupDetail.GroupInfo[0].ApplyJoinOption;
				// let CreateTime = groupDetail.GroupInfo[0].CreateTime;
				// let FaceUrl = groupDetail.GroupInfo[0].FaceUrl;
				// let GroupId = groupDetail.GroupInfo[0].GroupId;
				// let Introduction = groupDetail.GroupInfo[0].Introduction;
				// let LastInfoTime = groupDetail.GroupInfo[0].LastInfoTime;
				// let LastMsgTime = groupDetail.GroupInfo[0].LastMsgTime;
				// let MaxMemberNum = groupDetail.GroupInfo[0].MaxMemberNum;
				// let MemberNum = groupDetail.GroupInfo[0].MemberNum;
				// let Name = groupDetail.GroupInfo[0].Name;
				// let NextMsgSeq = groupDetail.GroupInfo[0].MemberNum;
				// let MemberNum = groupDetail.GroupInfo[0].MemberNum;
				// let MemberNum = groupDetail.GroupInfo[0].MemberNum;
				// let MemberNum = groupDetail.GroupInfo[0].MemberNum;
				// let MemberNum = groupDetail.GroupInfo[0].MemberNum;
				// let MemberNum = groupDetail.GroupInfo[0].MemberNum;
				// let data = {
				// 	"ApplyJoinOption": ApplyJoinOption,
				// 	"CreateTime": CreateTime,
				// 	"FaceUrl": FaceUrl,
				// 	"GroupId": GroupId,
				// 	"Introduction": Introduction,
				// 	"LastInfoTime": LastInfoTime,
				// 	"LastMsgTime": LastMsgTime,
				// };

      },
			//群主\管理员 退群
			quitGroup(group_id) {
					var options = null;
					if (group_id) {
							options = {
									'GroupId': group_id
							};
					}
					if (options == null) {
							alert('退群时，群组ID非法');
							return;
					}
					webim.quitGroup(
							options,
							function(resp) {
								alert("退出成功");
									// this.$router.push({path: '/groupList'});
									//在表格中删除对应的行
									// $('#get_my_group_table').bootstrapTable('remove', {
									// 		field: 'GroupId',
									// 		values: [group_id]
									// });
									//刷新我的群组列表
									//getJoinedGroupListHigh(getGroupsCallbackOK);
									// deleteSessDiv(webim.SESSION_TYPE.GROUP, group_id); //在最近的联系人列表删除可能存在的群会话
							},
							function(err) {
									alert(err.ErrorInfo);
							}
					);
			},

      //修改群资料
      modifyGroup() {
        let That = this;
          if (this.currentGroupDetail.Name.length == 0) {
              alert('请输入群组名称');
              return;
          }
          if (webim.Tool.trimStr(this.currentGroupDetail.Name).length == 0) {
              alert('您输入的群组名称全是空格,请重新输入');
              return;
          }
          if (webim.Tool.getStrBytes(this.currentGroupDetail.Name) > 30) {
              alert('您输入的群组名称超出限制(最长10个汉字)');
              return;
          }
          if (webim.Tool.getStrBytes(this.currentGroupDetail.Notification) > 150) {
              alert('您输入的群组公告超出限制(最长50个汉字)');
              return;
          }
          if (webim.Tool.getStrBytes(this.currentGroupDetail.Introduction) > 120) {
              alert('您输入的群组简介超出限制(最长40个汉字)');
              return;
          }
          var options = {
              'GroupId': this.currentGroupDetail.GroupId,
              'Name': this.currentGroupDetail.Name,
              //'FaceUrl': $('#mg_face_url').val(),
              'Notification': this.currentGroupDetail.Notification,
              'Introduction': this.currentGroupDetail.Introduction,
              'ShutUpAllMember': $('input[name="ShutUpAllMember"]:checked').val()//新增群组全局禁言。参数为：On和Off
          };
          console.log(options);
            webim.modifyGroupBaseInfo(
                  options,
                  function (resp) {
                      //在表格中修改对应的行              
                      // $('#get_my_group_table').bootstrapTable('updateRow', {
                      //     index: $('#mg_sel_row_index').val(),
                      //     row: {
                      //         Type: $('input[name="mg_type_radio"]:checked').val(),
                      //         Name: webim.Tool.formatText2Html($('#mg_name').val()),
                      //         Introduction: webim.Tool.formatText2Html(
                      //         $('#mg_introduction').val()),
                      //         Notification: webim.Tool.formatText2Html(
                      //         $('#mg_notification').val())
                      //     }
                      // });
                      // $('#modify_group_dialog').modal('hide');
                      alert('修改群资料成功');
                      That.$router.push({path: '/groupList'});

                  },
                  function (err) {
                      alert(err.ErrorInfo);
                  }
          );  
      }
      

    },

		mounted() {
		},

    components: {
       // headTop
    }
}

</script>

<style lang="scss"> 
   @import '../../style/group_details';
</style>